import React from 'react';
import { Row, Col, Form, Input, Button, Icon } from 'antd';
import cookie from 'js-cookie';
// import InlineSVG from 'svg-inline-react';
import back from 'assets/bg.jpeg';
// import classnames from 'classnames';
import styles from './index.less';


const FormItem = Form.Item;
let timer = '';

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      seconds: -1
    };
  }

  componentDidMount(){
    cookie.remove('token');
    cookie.remove('tokenType');
  }
  
  sendMsg() {
    const { form, getMsg } = this.props;
    form.validateFields(['name'], (err, values) => {
      if(err){
        return;
      }
      this.setState({
        seconds: this.props.seconds || 60
      }, () => this.startCountDown());
      getMsg({ nameOrPhone: values.name });
    });
  }
  startCountDown() {
    let { seconds } = this.state;
    timer = setInterval(() => {
      if (!seconds) {
        clearInterval(timer);
      }
      this.setState({
        // eslint-disable-next-line
        seconds: --seconds
      });
    }, 1000);
  }


  handleOk() {
    const { form, onLogin } = this.props;
    form.validateFields(((err, values) => {
        if(!err){
            onLogin(values);
        }
    }));
  }
  handleLogin(e) {
    const evt = e || window.event; // 获取event对象
    if (evt.keyCode === 13) {
      this.handleOk();
    }
  }

  render() {
    const { form, loading } = this.props;
    const { seconds } = this.state;
    const { getFieldDecorator } = form;
    
    return (
      <div className={styles.login}>
        <div
          style={
            { backgroundImage: `url(${back})`,
            backgroundPosition: '50%',
            backgroundRepeat: 'no-repeat',
            backgroundSize: 'cover',
            height: '100vh' 
          }
        }
         />
        <div
          className={styles.wrap}
          onKeyDown={e => this.handleLogin(e)}
        >
          <div className={styles.tit}>
            后台管理系统
          </div>
          <FormItem>
            {getFieldDecorator('name', {
                    rules: [{
                    required: true,
                    message: '请填写用户名'
                    }]
                })(<Input 
                  prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} 
                  placeholder="用户名" 
                  />)}
          </FormItem>
          <FormItem >
            {getFieldDecorator('password', {
                    rules: [{
                    required: true,
                    message: '请填写密码'
                    }]
                })(<Input 
                  prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  type="password"
                  placeholder="密码" />)}
          </FormItem>
          <FormItem >
            <Row gutter={16}>
              <Col span="14">
                <FormItem>
                  {getFieldDecorator('validateCode', {
                    rules: [{
                    required: true,
                    message: '请填写验证码'
                    }]
                  })(<Input
                    prefix={<Icon type="mail" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    placeholder="短信验证码" 
                  />)}
                </FormItem>
              </Col>
              <Col span="10" style={{height: 32}}>
                {seconds < 0
                    ? <Button onClick={() => this.sendMsg()}>获取验证码</Button>
                    : <Button disabled>{`${seconds}秒后重发`}</Button>
                  }
              </Col>
            </Row>
          </FormItem>
          <Row>
            <Button
              type="primary" 

              onClick={() => this.handleOk()} 
              loading={loading.login}
              style={{width: '100%', backgroundColor: '#599803', borderColor: '#599803'}}
            >
              登录
            </Button>
          </Row>
        </div>
        <div className={styles.footer}>
          {/* <ul className={classnames(styles.alink, 'clearfix')}>
            <li><a hrer="#">这是链接</a></li>
            <li><a hrer="#">这是链接</a></li>
            <li><a hrer="#">这是链接</a></li>
          </ul> */}
          <p>
            <a
              style={{color:'#fff'}}
              target="_blank" 
              rel="noopener noreferrer"
              href="http://www.beian.miit.gov.cn">蜀ICP备19004467号</a>
          </p>
        </div>        
      </div>
    );
  }
}

export default Form.create({})(Login);
